import React, { useEffect, useState } from 'react'

import { Rate, Tabs } from 'antd-mobile'
import { filminfo_api } from '../../apis/details'
import storage from '../../utils/storage';
import "./filmInfo.less"
import moment from "moment"

export default function FilmInfo() {
    let [finfo, setFinfo] = useState([]);
    let [actors, setActors] = useState([]);
    let [actiors_image, setActiors_image] = useState([]);

    let [film, setFilm] = useState(storage.getSession('film'));


    useEffect(async () => {
        //console.log(film);
        let res = await filminfo_api({ movieid: film.id });
        setFinfo(res.data.data);
        setActors(res.data.data.actors.split(','));
        setActiors_image(res.data.data.actiors_image.split(','));

        console.log(finfo);
    }, [])

    return (
        <div className="film-info">
            <video src={finfo.video} controls muted></video>
            <ul>
                <li className="info-content">
                    <img src={finfo.image} alt="" />
                    <div className="content">
                        <h3>{finfo.name}</h3>
                        <p><span>{finfo.time}分钟</span> / <span>{finfo.type}</span></p>
                        <p>上映时间: {moment(finfo.activetime).format("YYYY-MM-DD")}</p>
                    </div>
                </li>
                <li className="eval">
                    <div className="score">
                        <h2>{finfo.point}</h2>
                        <Rate readOnly allowHalf value={(finfo.point) / 2} style={{
                            '--star-size': '12px',
                            '--active-color': '#fe942a',
                        }} />
                        <p>{Math.round((finfo.evaluates / 10000) * 100) / 100}万人评价</p>
                    </div>
                    <div className="people-num">
                        <p><span>{finfo.wannas}</span>人想看</p>
                        <p><span>{finfo.wannas}</span>人看过</p>
                    </div>
                </li>
            </ul>
            <Tabs defaultActiveKey="intro">
                <Tabs.Tab title='简介' key='intro'>
                    <p className="intro">
                        {finfo.info}
                    </p>
                </Tabs.Tab>
                <Tabs.Tab title='影评' key='eval'>
                    这是影评
                </Tabs.Tab>
                <Tabs.Tab title='更多' key='more'>
                    <ul className="director-image">
                        {
                            actiors_image.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <p>{actors[index]}</p>
                                        <img src={item} alt="" />
                                    </li>
                                )
                            })
                        }
                    </ul>
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}
